<template>
    <div>
      <header-top title="忘记密码" >
        <div @click="$router.back()" class="back" slot="back"></div>
      </header-top>

      <div class="content clearfix">
        <form class="form" id="forget">
          <div class="text user-icon">
            <input type="text" style="width: 13rem;" placeholder="请输入手机号" v-model="phoneNo">
            <a href="javascript:;" class="code" @click="getCode">获取验证码</a>
          </div>
          <div class="text pwd-icon">
            <input type="password" placeholder="请输入验证码" v-model="code" >
          </div>
          <div class="text pwd-icon">
            <input type="password" placeholder="请输入密码" v-model="pwd">
          </div>
          <div class="text pwd-icon">
            <input type="password" placeholder="请确认密码" v-model="newPwd">
          </div>
          <div class="submit" @click="sub">提交</div>
        </form>
      </div>
    </div>
</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import { Toast } from 'vant';   //使用消息提示
  import {reqForget,reqGetCode} from "@/api";

  export default {
    name: "forget",
    data(){
      return{
        phoneNo:null,
        code:null,
        pwd:null,
        newPwd:null,
      }
    },
    components:{
      headerTop:headerTop,
    },
    methods:{
          async getCode(){
            if(!(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(this.phoneNo))){
              Toast('请输入正确手机号')
              return;
            }
            let code = await reqGetCode(this.phoneNo,'teacher')
            if(code.status){
              Toast(code.message)
            }


          },
          async sub(){

            if(!this.code){
              Toast('请输入验证码')
              return;
            }
            if(!(/^[0-9A-Za-z]{6,}$/.test(this.pwd))){
              Toast('密码长度为6位，由数字字母组成！')
              return;
            }
            if(this.pwd != this.newPwd){
              Toast('两次输入密码不同')
              return
            }
            let req = await reqForget(this.phoneNo,this.code,this.pwd)
            if(req.status){
              Toast(req.message)
            }


          }
    }
    }

</script>

<style scoped>

  .form{ background: #fff; padding-bottom: 2rem;}
  .text {width: 21rem; height: 4.5rem; border-bottom: 1px solid #bfbfbf; margin: 0 auto; padding-left: 4rem; }
  .text input{ width: 21rem; float: left; height: 4.5rem; line-height: 4.5rem; font-size: 1.05rem; padding:0;}
  .code{width:7.5rem; height:1.225rem; line-height: 1.225rem; margin-top: 1.638rem; border-left: 1px solid #bfbfbf; float: right; text-align: center; color:#00c08c; font-size: 1.05rem; }
  .submit{width: 25rem; height: 2.95rem; border-radius: 0.25rem; background: #00c08c; border:none; margin: 3.5rem auto 0; display: block; color:#fff; font-size: 1.05rem; text-align: center; line-height: 2.95rem;}

</style>
